<template>
    <div>
        <div class="assess">
            <Top title="评论" iconShow="1"></Top>
            <div class="assess-assessdo">
                <span class="assess-assessdo-netassess">网友评论</span>
                <!-- <span  class="assess-assessdo-num"><span style="color:red;">20</span> 条评论</span> -->
                <textarea placeholder="文明上网，不传谣言，登录可评论！" v-model="submitContent" ref="textarea"></textarea>
                <div class="assess-assessdo-btn" @click="submit">发表评论</div>
            </div>
            <div class="assess-title">评论内容</div>
            <div>
                <div v-if="commentList.length<=0" style="line-height:30px;font-size:13px;margin-left:0;padding-left:12px;width:100%;box-sizing:border-box;">目前还没有任何评论哦，快去评论吧！</div>
                <!-- <div class="assess-item" v-for="(item,index) in commentList" :key="index">
                    <span>{{item.name}}</span>
                    <p>{{item.content}}</p>
                </div> -->
                <div class="assess-item" v-for="(item,index) in commentList" :key="index">
                    <!-- TUDO -->
                    <nav>
                        <img :src="item.commentHeadImg||'static/img/user.png'" class="assess-item-img fl" alt="头像">
                        <span class="assess-item-nickname">{{item.nickname || item.name}}</span>
                        <span class="assess-item-date fl">{{item.time|formatDate}}</span>
                    </nav>
                    <p class="assess-item-text">{{item.content}}</p>
                </div>
                <!-- <div class="assess-more">查看更多评论>></div> -->
            </div>

            <div class="assess-goTop" @click="goTop" v-if="commentShow">
                <i class="iconfont icon-pinglun"></i>
            </div>
        </div>
        <load-more :tip="('正在加载')" v-if="loadMoreShow"></load-more>
        <load-more :show-loading="false" :tip="('没有更多了')" background-color="#f5f5f5" v-if="noMoreShow"></load-more>
    </div>
</template>
<script>
import Top from "../../../components/Header";
import { cookie, LoadMore, dateFormat } from "vux";
import { Toast, MessageBox } from "mint-ui";

export default {
  name: "assess",
  components: { Top, LoadMore },
  data() {
    return {
      commentList: [],
      submitContent: "",
      selectedList: [],
      flag: true,
      pageNum: 1,
      loadMoreShow: false,
      noMoreShow: false,
      commentShow: false
    };
  },
  filters: {
    formatDate(val) {
      return dateFormat(val, "YYYY-MM-DD HH:mm");
    }
  },
  created() {
    var _this = this;
    this.$nextTick(function() {
      window.addEventListener("scroll", onScroll);
    });
    // 判断滚动条位置，加载更多
    function onScroll() {
      var scrollTop = document.body.scrollTop;
      var innerHeight = window.innerHeight;
      var offsetHeight = document.body.offsetHeight;
      if (scrollTop >= 140) {
        _this.commentShow = true;
      } else {
        _this.commentShow = false;
      }
      if (scrollTop + innerHeight >= offsetHeight) {
        if (_this.flag) {
          if (_this.commentList.length >= 7) {
            _this.flag = false;
            _this.getCommentList();
          } else {
            _this.noMoreShow = true;
          }
        }
      }
    }
  },
  mounted() {
    document.setTitle("评论");
    var pid = this.$route.query.id;
    this.$http
      .post("/loansupermarket-app/comment/postComment", {
        pid: pid,
        pageSize: 7,
        pageNum: 1
      })
      .then(function(response) {
        var resBody = response.data;
        if (resBody.code == "000") {
          this.commentList = resBody.data;
          if (this.commentList.length < 7) {
            this.noMoreShow = true;
          }
        }
      });
  },
  methods: {
    submit() {
      var token = cookie.get("token");
      var pid = this.$route.query.id;
      this.commentList = [];
      this.noMoreShow = false;
      if (this.submitContent.length <= 0 || this.submitContent.length > 200) {
        MessageBox.alert("内容应少于200个字符且不能为空~");
      } else {
        this.$http
          .post("/loansupermarket-app/comment/add", {
            postId: pid,
            content: this.submitContent,
            token: token
          })
          .then(function(response) {
            var resBody = response.data;
            if (resBody.code == "000") {
              Toast({
                message: "评论成功",
                iconClass: "iconfont icon-guanggaolanyouhua02"
              });
              this.submitContent = "";
              var pid = this.$route.query.id;
              this.pageNum = 1;
              this.loadMoreShow = true;
              var _this = this;
              setTimeout(function() {
                _this.$http
                  .post("/loansupermarket-app/comment/postComment", {
                    pid: pid,
                    pageSize: 7,
                    pageNum: _this.pageNum
                  })
                  .then(function(response) {
                    var resBody = response.data;
                    if (resBody.code == "000") {
                      // this.commentList = resBody.data;
                      _this.loadMoreShow = false;
                      // var resBody = response.body;
                      if (resBody.data.length < 7) {
                        _this.noMoreShow = true;
                        _this.flag = false;
                      } else {
                        _this.flag = true;
                      }
                      _this.commentList = this.commentList.concat(resBody.data);
                    }
                  });
              }, 500);
            } else if (resBody.code == "444") {
              this.$router.push({ path: "/login", query: { history: 1 } });
            } else {
              MessageBox.alert(resBody.mesg);
            }
          });
      }
    },
    getCommentList() {
      var pid = this.$route.query.id;
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
        _this.$http
          .post("/loansupermarket-app/comment/postComment", {
            pid: pid,
            pageSize: 7,
            pageNum: _this.pageNum
          })
          .then(function(response) {
            var resBody = response.data;
            if (resBody.code == "000") {
              // this.commentList = resBody.data;
              _this.loadMoreShow = false;
              // var resBody = response.body;
              if (resBody.data.length < 7) {
                _this.noMoreShow = true;
                _this.flag = false;
              } else {
                _this.flag = true;
              }
              _this.commentList = this.commentList.concat(resBody.data);
            }
          });
      }, 500);
    },
    goTop() {
      window.scrollTo(0, 0);
      this.$refs.textarea.focus();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../scss/variable/base.scss";
.assess {
  background: #fff;
  margin-top: 1.2rem;
  text-align: left;
  //   &-item {
  //     width: calc(100% - 0.4rem); // height: 1.7rem;
  //     padding-bottom: 0.2rem;
  //     margin-left: 0.4rem;
  //     border-bottom: 1px solid $borderColor;
  //     span {
  //       line-height: 0.93rem;
  //       font-size: 0.3rem;
  //       color: #686868;
  //     }
  //     p {
  //       font-size: 0.35rem;
  //       word-wrap: break-word;
  //     }
  //     &:last-child {
  //       border-bottom: none;
  //     }
  //   }
  &-item {
    $itemh: 0.6rem;
    padding-bottom: 0.2rem;
    width: calc(100% - 0.4rem);
    // height: 1.7rem;
    margin-left: 0.4rem;
    border-bottom: 1px solid $borderColor;
    nav {
      padding: 0.2rem 0;
      span {
        display: inline-block;
        line-height: $itemh;
        vertical-align: middle;
        font-size: 0.3rem;
        color: #686868;
      }
      img {
        width: $itemh;
        height: $itemh;
        border-radius: 50%;
        border: none;
        overflow: hidden;
      }
    }
    &-nickname{
      text-indent: .2rem;
    }
    &-text {
      clear: both;
      font-size: 0.35rem;
      word-wrap: break-word;
    }
    &-date {
      float: right;
      margin-right: 0.1rem;
    }
  }
  &-assessdo {
    overflow: hidden;
    &-netassess {
      line-height: 0.8rem;
      margin-left: 0.4rem;
    }
    textarea {
      width: 9.2rem;
      height: 3rem;
      margin-left: 0.4rem;
      box-sizing: border-box;
      padding: 0.2rem;
    }
    &-num {
      float: right;
      margin-right: 0.4rem;
      line-height: 0.8rem;
    }
    &-btn {
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      float: right;
      margin-right: 0.4rem;
      background: $primaryColor;
      color: #fff;
    }
  }
  &-title {
    padding-left: 0.4rem;
    border-bottom: 2px solid $borderColor;
    line-height: 1rem;
    font-size: 0.4rem;
  }
  &-more {
    height: 1.14rem;
    line-height: 1.14rem;
    color: $primaryColor;
    text-align: center;
    font-size: 0.38rem;
  }
  &-goTop {
    box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.2);
    position: fixed;
    bottom: 2rem;
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    text-align: center;
    line-height: 1.5rem;
    border-radius: 50%;
    right: 0.5rem;
    i {
      font-size: 0.8rem;
    }
  }
}
</style>

